<!--
 * @Author: cqg
 * @Date: 2020-12-07 16:42:54
 * @LastEditors: cqg
 * @LastEditTime: 2020-12-08 09:28:02
 * @Description: file content
-->
<template>
  <div class="page-box">
    <dataList
      placeholder="搜索物业名称"
      :pageInfo="pager"
      :listData="tableData"
      searchName="projectName"
      :menuList="['export']"
      :filterList="filterList"
      @menu-click="handleMenuClick"
    >
      <el-table :data="tableData" align="center">
        <el-table-column label="物业名称" width="120" align="center" prop="propertyNames"></el-table-column>
        <el-table-column label="费用周期" align="center" prop="costPeriodStart" width="200">
          <template slot-scope="scope">{{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}</template>
        </el-table-column>
        <el-table-column label="付款项目" width="100" align="center" prop="chargeProjectName"></el-table-column>
        <el-table-column label="合同应付金额" align="center" prop="payableMoneyOld" width="100"></el-table-column>
        <el-table-column label="应付调整金额(元)" align="center" prop="adjustmentAmount" width="100"></el-table-column>
        <el-table-column label="本月应付金额(元)" align="center" prop="payableMoney" width="100"></el-table-column>
        <el-table-column label="状态" align="center" prop="payableStatus" width="100">
          <template slot-scope="scope">{{scope.row.payableStatus | dict('payable_status')}}</template>
        </el-table-column>
        <el-table-column width="150" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleShowReceivableData(scope.row)">查看</el-button>
            <span style="display: inline-block;padding: 0 10px;" v-if="scope.row.payableStatus === '11'">|</span>
            <el-button type="text" @click="handleClickSubmit(scope.row)" v-if="scope.row.payableStatus === '11'">复核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </dataList>
    <showActual ref="showActual" @resetList="getListData" v-if="showPayable" @beforeClose="handleShowClose" @handleClose="handleShowClose"></showActual>
    <reviewPayable ref="reviewPayable" @resetList="resetList" v-if="editPayable" @beforeClose="handleClose" @handleCancel="handleClose"></reviewPayable>
  </div>
</template>

<script src="./index.js">
</script>

<style scoped lang="scss">
</style>
